<template>
  <!-- 添加或修改商品规格属性对话框 -->
  <el-dialog :close-on-click-modal="false" title="配置样式" :visible.sync="open" @close="cancel"
             width="1024px" append-to-body>
    <div class="dialog-layout">
      <el-row>
        <el-col :span="10">
          <div class="content-layout">
            <UploadOssBtn ref="upload1" :uploadStyle="2" :width="355" :height="50"
                          :usePreview="true" :number="'1'"
                          remark="建议尺寸-宽:710 高:100"
                          @onUploadResult="onUploadResult"/>
            <div class="content-bottom">
              <UploadOssBtn ref="upload2" :uploadStyle="2" :width="175" :height="280" :usePreview="true"
                            :number="'2'"
                            remark="建议尺寸-宽:350 高:560"
                            @onUploadResult="onUploadResult"/>
              <div class="content-rigth">
                <UploadOssBtn ref="upload3" :uploadStyle="2" :width="175" :height="140" :usePreview="true"
                              :number="'3'"
                              remark="建议尺寸-宽:350 高:280"
                              @onUploadResult="onUploadResult"/>
                <UploadOssBtn ref="upload4" :uploadStyle="2" :width="175" :height="140" :usePreview="true"
                              :number="'4'"
                              remark="建议尺寸-宽:350 高:280"
                              @onUploadResult="onUploadResult"/>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <el-form ref="form" :model="form" :rules="rules" label-width="96px">
            <el-row>
              <el-col :span="2" align="center">
                <span class="btn-number">1</span>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转类型" prop="skipType1">
                  <el-select v-model="form.style1.skipType" placeholder="请选择跳转类型">
                    <el-option
                      v-for="dict in skipTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转参数" prop="skipValue1">
                  <el-input v-model="form.style1.skipValue" placeholder="请输入跳转参数"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="2" align="center">
                <span class="btn-number">2</span>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转类型" prop="skipType2">
                  <el-select v-model="form.style2.skipType" placeholder="请选择跳转类型">
                    <el-option
                      v-for="dict in skipTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转参数" prop="skipValue2">
                  <el-input v-model="form.style2.skipValue" placeholder="请输入跳转参数"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="2" align="center">
                <span class="btn-number">3</span>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转类型" prop="skipType3">
                  <el-select v-model="form.style3.skipType" placeholder="请选择跳转类型">
                    <el-option
                      v-for="dict in skipTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转参数" prop="skipValue3">
                  <el-input v-model="form.style3.skipValue" placeholder="请输入跳转参数"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="2" align="center">
                <span class="btn-number">4</span>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转类型" prop="skipType4">
                  <el-select v-model="form.style4.skipType" placeholder="请选择跳转类型">
                    <el-option
                      v-for="dict in skipTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="跳转参数" prop="skipValue4">
                  <el-input v-model="form.style4.skipValue" placeholder="请输入跳转参数"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col align="right">
                <div class="dialog-footer">
                  <el-button type="primary" @click="submitForm">确 定</el-button>
                  <el-button @click="cancel">取 消</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
  import UploadOssBtn from '@/components/UploadOssBtn'

  import {
    styleList,
    updateRes
  } from '@/api/basic/home_list'

  export default {
    name: 'edit-style1',
    components: { UploadOssBtn },
    data() {
      return {
        open: false,
        // 跳转类型;1=无跳转,2=跳转url,3=跳转商品字典
        skipTypeOptions: [],
        hId: null,
        form: {
          hId: null,
          style1: {
            skipType: null,
            skipValue: null
          },
          style2: {
            skipType: null,
            skipValue: null
          },
          style3: {
            skipType: null,
            skipValue: null
          },
          style4: {
            skipType: null,
            skipValue: null
          }
        },
        // 表单校验
        rules: {}
      }
    },
    methods: {
      show(id) {
        this.hId = id
        this.open = true
        this.reset()
        this.initHttp()
      },
      initHttp() {
        const loading = this.$loading({
          text: '拼命读取中',
          target: document.querySelector('.dialog-layout'),
          spinner: 'el-icon-loading'
        })
        let _this = this
        styleList({ id: this.hId }).then(response => {
          _this.form = response.data
          _this.$refs.upload1.inShowImage(response.data.style1.image)
          _this.$refs.upload2.inShowImage(response.data.style2.image)
          _this.$refs.upload3.inShowImage(response.data.style3.image)
          _this.$refs.upload4.inShowImage(response.data.style4.image)
        }).finally(() => {
          loading.close()
        })
      },
      // 表单重置
      reset() {
        this.form = {
          hId: null,
          style1: {
            skipType: null,
            skipValue: null
          },
          style2: {
            skipType: null,
            skipValue: null
          },
          style3: {
            skipType: null,
            skipValue: null
          },
          style4: {
            skipType: null,
            skipValue: null
          }
        }
        this.resetForm('form')
      },
      submitForm() {
        let _this = this
        this.form.hId = this.hId
        updateRes(this.form).then(response => {
          _this.msgSuccess('修改成功')
          _this.cancel()
        })
      },
      cancel() {
        this.$emit('on-close')
        this.hId = null
        this.open = false
        this.$refs.upload1.reset()
        this.$refs.upload2.reset()
        this.$refs.upload3.reset()
        this.$refs.upload4.reset()
      },
      onUploadResult(data, number) {
        this.form['style' + number].image = data
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;

    .el-icon-upload2 {
      font-size: 28px;
      color: #8c939d;
    }

    .content-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 5px;

      .content-rigth {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        height: 280px;
        justify-content: space-between;
      }
    }
  }

  .btn-number {
    font-weight: bold;
    font-size: 28px;
    color: #8c939d;
  }
</style>
